import React from 'react';
import { BankOutView, BankTable } from '../components';
import { Form, Input, Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';

interface PermissionsFieldType {
  customNo: string;
  operatorNo: string;
  operatorName: string;
}

const columns: ColumnsType<DataType> = [
  {
    title: '姓名',
    dataIndex: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
  },
];

const data: DataType[] = [
  {
    key: '1',
    name: "zhangsan",
    age: 18,
    address: "Beijing"
  },
  {
    key: '2',
    name: "lisi",
    age: 30,
    address: "shanghai"
  }
];

const PermissionsInformation = () => {
  const [form] = Form.useForm();

  const handleClickSearchBtn = () => {
    form.validateFields().then(values => {
      alert(JSON.stringify(values));
      console.log(values);
    }).catch(err => {
      console.log(err);
    })
  }

  return (
    <BankOutView title="权限信息查询">
      <div className='search-view'>
        <Form form={form} className='search-view'>
          <Form.Item<PermissionsFieldType>
            className="search-item-input"
            name="customNo"
            label=""
            rules={[{ required: true, message: '请输入客户号!' }]}
          >
            <Input placeholder='请输入客户号!' />
          </Form.Item>
          <Form.Item<PermissionsFieldType>
            name="operatorNo"
            className="search-item-input"
            label=""
            rules={[{ required: true, message: '请输入操作员!' }]}
          >
            <Input placeholder='请输入账号!' />
          </Form.Item>
          <Form.Item<PermissionsFieldType>
            name="operatorName"
            className="search-item-input"
            label=""
            rules={[{ required: true, message: '请输入操作员名称!' }]}
          >
            <Input placeholder='请输入操作员名称!' />
          </Form.Item>
        </Form>
        <Button type='primary' className='search-btn' onClick={handleClickSearchBtn}>查询</Button>
      </div>
      <div>
        <BankTable
          key={"1"}
          columns={columns}
          data={data}
          paginationInfo={{ total: 120 }}
        />
      </div>
    </BankOutView>
  )
}

export default PermissionsInformation;